import {
  defineComponent,
  PropType,
  reactive,
  watch,
  ref,
  onMounted
} from 'vue';
import { SubListState } from './type';
import { SetupContext } from '@vue/runtime-core';

export default defineComponent({
  props: {
    /**
     * v-model
     */
    modelValue: {
      type: Object,
      default: () => ({
        userId: '',
        type: '1',
        skipExpressionType: '${false}'
      }),
      required: true
    },
    /**
     * 原型对象（用于new）
     */
    model: {
      type: Object as PropType<{ [key: string]: string }>,
      default: () => Object.assign({})
    }
  },
  emits: ['update:modelValue'],
  setup(props: any, ctx) {
    const sublistState = reactive({
      data: props.modelValue.type,
      type: props.modelValue.type,
      userId: props.modelValue.userId,
      skipExpressionType: props.modelValue.skipExpressionType,
      returnableTaskNode: props.modelValue.returnableTaskNode,
      editing: false,
      editItem: {},
      editIndex: undefined,
      isNew: false,
      sublistForm: null
    });

    // SubList表单
    const form = ref();
    onMounted(() => {
      sublistState.sublistForm = form.value;
    });

    //重置状态
    const restoreState = () => {
      sublistState.data = props.modelValue
        ? JSON.parse(JSON.stringify(props.modelValue))
        : [];
      sublistState.editing = false;
      sublistState.editItem = undefined;
      sublistState.editIndex = undefined;
      sublistState.isNew = false;
    };

    watch(
      [
        () => sublistState.userId,
        () => sublistState.type,
        () => sublistState.skipExpressionType
      ],
      () => {
        restoreState();
        ctx.emit('update:modelValue', {
          type: sublistState.type,
          userId: sublistState.userId,
          returnableTaskNode: sublistState.returnableTaskNode,
          skipExpressionType: sublistState.skipExpressionType
        });
      }
    );

    return {
      sublistState,
      form
    };
  },
  render() {
    const props = this.$props;
    const sublistState = this.sublistState;

    const show = sublistState.returnableTaskNode.length <= 0;

    return (
      <div class="sublist-div">
        <div class="sublist-div">
          <el-divider
            style={{ margin: '0px 10px 20px 10px' }}
            content-position="left"
          >
            审批类型
          </el-divider>
          <el-radio-group v-model={sublistState.type}>
            <el-radio value={1} size="default">
              终止流程
            </el-radio>
            <el-radio value={2} size="default">
              驳回到指定节点
            </el-radio>
          </el-radio-group>
          {sublistState.type === 2 && (
            <el-form-item label="驳回节点">
              <el-select
                clearable
                disabled={sublistState.returnableTaskNode.length <= 0}
                v-model={sublistState.userId}
                placeholder="请选择"
                size="small"
              >
                {sublistState.returnableTaskNode.map((item) => {
                  return <el-option label={item.name} value={item.id} />;
                })}
              </el-select>
            </el-form-item>
          )}
        </div>

        {show && (
          <div>
            <el-form-item label="是否跳过此节点">
              <el-switch
                v-model={sublistState.skipExpressionType}
                active-value={'${true}'}
                inactive-value={'${false}'}
                size="small"
              />
            </el-form-item>
          </div>
        )}
      </div>
    );
  }
});

const radioSelectChange = (
  state: SubListState<any>,
  ctx: SetupContext<any, any>
): any => {
  function updateRadioSelect(val: string): void {
    ctx.emit('update:modelValue', state.data);
  }
};
